
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<link rel="stylesheet" th:href="@{/css/goods.css}" />
	<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
	<script th:src="@{/js/goods.js}"></script>
	<body>
		<div class="d1">
			<div class="wp">
<!--				<input id="p" th:each="h:${property}" th:value="${h.Configure_price}">-->

				<div class="box" id="box">
					<div class="small" id="smallBox">
						<img class="show_img" src="img/F117-V.jpg" width="450px">
						<div class="glass" id="glass"></div>
					</div>
					<div class="big" id="bigBox">
						<img class="show_img" width="800px" src="img/F117-V.jpg" id="bigPic">
					</div>
				</div>

				<div class="xq_img"  >
					<span th:each="d : ${details}">
					<img th:if="${d.pimg}!=null"  th:src="@{'img/JiXeiShu/'+${d.pimg}}" >
					</span>
				</div>

			</div>

			<div class="wa" th:each="g : ${goods}">
				<ul>
					<li >
						<h2 th:text="${g.name}">机械师F117-V T1PX金属游戏本</h2>
					</li>
					<br />
					<li style="color:dodgerblue;">
						<p th:text="${g.subtitle}">I7处理器（可选8核版）,GTX1650Ti独显,512GB固态,8G内存</p>
					</li>
					<br />


					
					<div>
						<li>
							<div class="ds_bg" style="background-image: url(img/jgbj.png);">
								<div class="ds_jiage" >
									<span>销售价</span>
									￥<input  th:each="g : ${goods}" class="bj" th:value="${g.price}" />
									<br />
									<br />
									<span>市场价</span>
									<span class="xsj">￥<s>99999</s></span>
								</div>
								<div class="ds_xl">
									<span>积累销量<p>&nbsp;</p><p>11</p></span>
									<span>积累评价<p>&nbsp;</p><p>11</p></span>
								</div>
							</div>
						</li>

						<li>
							<div class="site">
								<span style="font-size: 12px; margin-left:15px;">配送至</span>
<!--								<input style="outline: none; margin-left: 10px; padding-top: 10px; color: dodgerblue;" readonly value="北京 北京 市海淀区 清河街道" />-->
								<select  class="adres"  style="outline: none; margin-left: 10px;margin-top: 10px; color: dodgerblue;">
									<option  th:each="a : ${address}" th:value="${a.id}" th:text="${a.shen}+${a.shi}+${a.xian}" ></option>
								</select>

								<!--								<a hidden class="dzqd">确定</a>-->
<!--								<a class="xgdz">修改</a>-->
<!--								<a class="tjdz">跟换</a>-->
							</div>
						</li>

						<li style="font-size: 14px; margin-top: 20px;">选择配置 </li>
						<li >
							<div class="cm" th:each="c : ${cfp} ">
<!--								th:href="@{'goodsPage?goodsid='+${c.cid} }" ${c.cid}-->
							<button th:text="${c.sum}" th:value="${c.cid}">i7-9750H/8G+512G固态</button>
							</div>
						</li>
						<li style="font-size: 14px; margin-bottom:5px;">数量</li>
						<li>
							<button class="num_a">+</button><input class="num" value="1" /><button class="num_m">-</button>
						</li>
					
						<li style="margin-top: 10px; ">


							<input style="display: none" name="subject" th:each="g : ${goods}" th:value="${g.name}">
								<input style="display: none" name="total"  id="total" 	>

							<form action="/orderAdd" method="post">
								<input hidden  class="bj" name="gprice">
								<input hidden th:each="d : ${details.get(0)}" th:value="${d.pimg}"  name="gimg">
								<input hidden name="gnum" readonly class="num" value="1" />
								<input hidden th:each="g : ${goods}" th:value="${g.name}" name="gname">
								<input hidden name="uid"  th:each="h: ${uid}" th:value="${h}" >
								<input hidden name="gid"  th:each="h: ${gid}" th:value="${h}" >
								<input hidden class="addr" name="gaddress" >
								<input type="submit" value="立即购买" class="gm" />
							</form>
							<input type="button" value="加入购物车" class="gm2"  style="float: left;margin: -50px 0px 0px  200px "/>




						</li>
					</div>
					</ul>

				</div>
				
				<div class="klyk">
					<center>
					<li style="list-style: none" ><a >看了又看</a></li>
					<hr/>
					<ul th:each="h : ${hotgoods}">
							<li><a th:href="@{'goodsPage?gid='+${h.id}}"><img style="width: 100px;"  th:src="@{'img/'+${h.mainImage}}"></a></li>
							<li >
								<div th:text="${h.name}">机械师F117-V T1PX金属游戏本</div>
							</li>
							<li th:text="${h.price}">￥6999</li>

					</ul>

					</center>
				</div>
				
			</div>

			<div class="db">

				<div class="lxb">
					<center>
						<li style="height: 25px;background-color: whitesmoke; list-style: none; padding: 10px;"><b>热销榜</b></li>
						<ul th:each="h : ${hotgoods}">
						<li><a th:href="@{'goodsPage?gid='+${h.id}}"><img style="width: 100px;" th:src="@{'img/'+${h.mainImage}}"></a></li>
						<li >
							<div th:text="${h.name}">机械师F117-V T1PX金属游戏本</div>
						</li>
						<li th:text="${h.price}">￥6999</li>
						</ul>
					</center>
				</div>
				<div style="width: 1080px;float: right; ">
					
					<div class="xsp">
					<div id="xq">商品详情</div>
					<div id="sx">商品属性</div>
					<div id="pj">商品评价</div>
					</div>

					<div class="spxq" th:each="d : ${details}">

						<img th:if="${d.pimg}!=null" th:src="@{'img/'+${d.dimg}}"  />
					</div>
					
					<div class="gsx" hidden>
						
							<table  class="sx_tab" th:each="c : ${cfp.get(0)}" >
								<tr>
									<td>CPU型号：<a th:text="${c.cpu}"></a></td>
									<td>显存容量：<a th:text="${c.vm}"></a></td>
									<td>独立显卡：<a th:text="${c.gpu}"></a></td>
								</tr>
								<tr><td colspan="3"><hr color="gainsboro"/></td></tr>
								<tr>
									<td >固态硬盘：<a th:text="${c.gb}"></a></td>
									<td>内存容量：<a th:text="${c.ram}"></a></td>
									<td>屏幕规格：15.6英寸1080P 显示屏</td>
								</tr>
								<tr><td colspan="3"><hr  color="gainsboro" /></td></tr>
								<tr>
									<td>物理分辨率：1920*1080</td>
									<td>键盘：全尺寸RGB四区背光键盘</td>
									<td>整体配置：<a th:text="${c.sum}"></a></td>
								</tr>
								
							</table>
							
					</div>
					
					<div class="gpj" hidden>
						<div class="myd">
							<center>
								<ul>
									<li>
										<a class="myrs">99999</a>
										<a class="siz">人购买后满意</a>
									</li>
									<li>
										<div class="mybfb">满意度99.99%</div>
									</li>
								</ul>
							</center>
						</div>
				
						<div class="sppj" th:each="e : ${evaluate}">
							<ul class="pj">
								<li>
									<img src="img/ps.png" />
									<a class="pjnc" th:text="${e.yhusername}">绝绝子</a>
									<a class="pjsj" th:text="${#dates.format(e.edate,'yyyy-MM-dd')}">2021-10-8</a>

								</li>
								<li>
									<p th:text="${e.evaluatetext}">自从用了这手机后我就没吃过饭了</p>
								</li>
								<li>
								<div class="pj_img">
									<img style="width: 60px;  border: 1px solid gainsboro;" th:src="@{'img/'+${e.eimg}}">
								</div>
								</li>
							</ul>
						</div>

						
					</div>

				</div>
			</div>

		</div>

	</body>
	<script>

		$(".adres").click(function () {
			var s=$(this).val();
			$(".addr").val(s);
		})


	</script>
<script>
	$(document).ready(function() {
		$(".cm button").click(function (){
			var cid=$(this).val();
			$.ajax({
				type:'post',
				url:'http://localhost:9090/goodsPrice?goodsid='+cid,
				datatype:'application/json',
				success:function(data){
					for (var i=0;i<data.length;i++){
						$(".bj").val(data[i].cprice)
						alert(data[i].cprice)
					}
				}
			})
		})
		// $("#total").val(data[i].cprice)

		$('.num_m').click(function(){
			var num = $(".num").val();
			if (num <6 && num>1) {
				$('.num').val(num-1);
			}else{
				$('.num').val(num);
			}
		});
		// +按钮：
		$('.num_a').click(function(){
			var num = $(".num").val();
			if (num <5 && num>0) {
				var bl = Number(num)+1;
				$('.num').val(bl);
			}else{
				$('.num').val(num);
			}
		});

		$(".xq_img img").mousemove(function() {
			var s = $(this).attr("src");
			$(".show_img").attr("src", s);
			$(this).css("border", "1px solid dodgerblue")

		})

		$(".xq_img img").mouseout(function() {
			$(".xq_img img").css("border", "1px solid gainsboro")

		})

		$("#xq").click(function() {

			$(".spxq").show();
			$(".gpj").hide();
			$(".gsx").hide();

			$(".xsp div").css("background-color", "whitesmoke");
			$(".xsp div").css("color", "black");
			$(this).css("background-color", "dodgerblue");
			$(this).css("color", "white");
		})

		$("#pj").click(function() {
			$(".gpj").show();
			$(".spxq").hide();
			$(".gsx").hide();
			$(".xsp div").css("background-color", "whitesmoke");
			$(".xsp div").css("color", "black");

			$(this).css("background-color", "dodgerblue");
			$(this).css("color", "white");

		})

		$("#sx").click(function(){

			$(".gpj").hide();
			$(".spxq").hide();
			$(".gsx").show();
			$(".xsp div").css("background-color", "whitesmoke");
			$(".xsp div").css("color", "black");
			$(this).css("background-color", "dodgerblue");
			$(this).css("color", "white");

		})




		$(".guige div").click(function() {
			var bb = $(this).text();
			$(".guige div").css("border", "1px gainsboro solid");
			$(".guige div").css("color", "gray");
			$(this).css("border", "1px dodgerblue solid");
			$(this).css("color", "dodgerblue");
			$(".bb").val(bb);

		})


		$(".cm button").click(function() {
			var ys = $(this).text();
			$(".ys").val(ys);

			$(".cm button").css("border", "1px gainsboro solid");
			$(".cm button").css("color", "gray");
			$(this).css("border", "1px dodgerblue solid");
			$(this).css("color", "dodgerblue");
		})

		$(".xgdz").click(function() {
			$(".dzqd").show();
			$(".xgdz").hide();
			$('.site input').removeAttr("readonly");
		})

		$(".dzqd").click(function() {
			$(".dzqd").hide();
			$(".xgdz").show();

			$(".site input").attr("readonly", "readonly");

		})
	})



	window.onload = function(){
		var smallBox = document.getElementById('smallBox');
		var glass = document.getElementById('glass');
		var bigBox = document.getElementById('bigBox');
		var box = document.getElementById('box');
		var bigPic = document.getElementById('bigPic');
		//鼠标经过小盒子，显示大盒子和放大镜
		smallBox.onmouseover = function(){
			bigBox.style.display = 'block';
			glass.style.display = 'block';
		}
		//鼠标移出小盒子，隐藏小盒子和放大镜
		smallBox.onmouseout = function(){
			bigBox.style.display = 'none';
			glass.style.display = 'none';
		}
		smallBox.onmousemove = function(event){
			var st = document.body.scrollTop || document.documentElement.scrollTop;
			var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
			var event = event || window.event;
			//pageX,pageY获取鼠标相对于当前页面的坐标，IE8不支持
			//当有滚轮时，视口区鼠标的坐标clientX，需要加上滚动的距离才为鼠标在页面上的坐标
			var pageX = event.pageX || event.clientX + sl;
			var pageY = event.pageY || event.clientY + st;
			//计算放大镜的位置
			var targetX = pageX - box.offsetLeft - glass.offsetWidth/2;
			var targetY = pageY - box.offsetTop - glass.offsetHeight/2;
			if(targetX<0){
				targetX = 0;
			}
			if(targetY<0){
				targetY = 0;
			}
			if(targetX>smallBox.offsetWidth - glass.offsetWidth){
				targetX = smallBox.offsetWidth - glass.offsetHeight;
			}
			if(targetY>smallBox.offsetHeight - glass.offsetHeight){
				targetY=smallBox.offsetHeight - glass.offsetHeight
			}
			glass.style.left = targetX + 'px';
			glass.style.top = targetY + 'px';
			var bigMoveX = bigPic.offsetWidth - bigBox.offsetWidth;
			var smallMoveX = smallBox.offsetWidth - glass.offsetWidth;
			var bigMoveY = bigPic.offsetHeight - bigBox.offsetHeight;
			var smallMoveY = smallBox.offsetHeight - glass.offsetHeight;
			var rateX = bigMoveX/smallMoveX;
			var rateY = bigMoveY/smallMoveY;
			bigPic.style.left = -rateX*targetX+'px';
			bigPic.style.top = -rateY*targetY+'px';
		}
	}
</script>
</html>